<template>
  <view class="container">
    <view class="picker-wrap">
		<label for="">反馈类型：</label>
      <picker mode="selector" :range="array" @change="handlePickerChange" :value="index">
        <view class="uni-input" :class="{ 'default-text': index === -1, 'selected-text': index !== -1 }">
          {{ array[index] || '选择反馈类型' }}
        </view>
      </picker>
    </view>
    
    <form @submit.prevent="submit">
      <label for="content">反馈内容:</label>
      <textarea id="content" v-model="feedback.content" placeholder="请输入反馈内容" rows="5"></textarea>
      
      <label for="image-upload" class="upload-label">上传图片:</label>
      <input  class="input-file"  type="file" id="image-upload"  @change="handleImageUpload" multiple>
      
      <input type="text" v-model="feedback.phone" placeholder="手机/邮箱/QQ(选填)">
      
      <button @tap="submit" type="submit">提交</button>
    </form>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

const feedback = reactive({
  content: '',
  image: [] as string[],
  phone: ''
});

const array = ['投诉', '建议', '其他'];
const index = ref(-1);

const handlePickerChange = (event: any) => {
  index.value = event.detail.value;
};

const handleImageUpload = (event: any) => {
  const files = event.target.files;
  for (let file of files) {
    // 在这里处理文件，例如上传到服务器或保存到state
    // 示例：feedback.image.push(file);
  }
};

const submit = () => {
  console.log("提交", feedback);
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 8px;
  max-width: 600px;
  margin: 0 auto;
}

.picker-wrap {
  margin-bottom: 15px;
}

.uni-input {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 15px;
  cursor: pointer;
}

.uni-input.default-text {
  color: rgb(128, 128, 128);
}

.uni-input.selected-text {
  color: #000000;
}

textarea {
  width: 100%;
  min-height: 150px;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

input {
  width: 100%;
  height: 40px;
  margin-bottom: 15px;
  font-size: 14px;
  text-indent: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}




.input-file {
  border: 0;
}

.upload-label {
  cursor: pointer;
  margin-bottom: 5px;
  display: block;
  font-size: 16px;
  font-weight: bold;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

button[type="submit"] {
  width: 100%;
}

</style>
